
<template>
  <div class="form-datetime">
    <div class="bbx-form-editor-box">
      <div v-show="!disabled" :id="`${field.fieldName}-toolbar-container`"></div>
      <div
        :id="`${field.fieldName}-editor-container`"
        class="bbx-form-editor-container"
      ></div>
    </div>
  </div>
</template>

<script>
import FormMixin from '@src/component/form/mixin/form';
// import { FORM_FIELD_TEXT_MAX_LENGTH } from '@src/model/const/Number.ts';

import { createEditor, createToolbar } from '@wangeditor/editor';

export default {
  name: 'form-editor',
  mixins: [FormMixin],
  props: {
    value: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      // 是否是输入中文
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.initEditor();
    });
  },
  methods: {
    initEditor() {
      let that_ = this;
      // 编辑器配置
      const editorConfig = {};
      editorConfig.placeholder = this.placeholder || '请输入内容';
      editorConfig.autoFocus = false;
      editorConfig.readonly = this.disabled;
      editorConfig.onChange = editor => {
        // 当编辑器选区、内容变化时，即触发
        console.log('content', editor.children);
        console.log('html', editor.getHtml());
        that_.inputForValue(`${editor.getHtml()}`);
      };

      // 工具栏配置
      const toolbarConfig = {};

      // 创建编辑器
      const editor = createEditor({
        selector: `#${this.field.fieldName}-editor-container`,
        config: editorConfig,
        mode: 'default', // 或 'simple' 参考下文
        content:''
      });
      // 创建工具栏
      const toolbar = createToolbar({
        editor,
        selector: `#${this.field.fieldName}-toolbar-container`,
        config: toolbarConfig,
        mode: 'default', // 或 'simple' 参考下文
      });
    },
  },
};
</script>

<style lang="scss">
.bbx-form-editor-box {
  width: 100%;
  border: 1px solid $color-border-l3;
  z-index: 99;
  .bbx-form-editor-container {
    height: 400px;
  }
}
</style>
